<template>
    <nav>
        <div style="max-width:1240px;margin:auto;height:100%;width:100%">
            <strong v-if="surveyObj != null">{{ surveyObj.surveyTitle }}</strong>
            <p v-if="errorMsg!=null" class="error_msg">{{ errorMsg }}</p>
        </div>
    </nav>
    <el-scrollbar>
        <div style="margin-top: 60px"></div>
        <main>
            <div v-if="answer == null" class="survey_container" v-loading="surveyObj == null">
                <form-create v-loading="loading" v-if="surveyObj != null" :rule="surveyObj.surveyContent"
                    @submit="onSubmit"></form-create>
            </div>
            <div v-else>
                <div class="answer_item" v-for="an in answer" :key="an.title">
                    <strong>问：{{ an.title }}</strong>
                    <p>答：{{ an.content }}</p>
                </div>
            </div>
        </main>
    </el-scrollbar>
</template>
<script>
export default {
    name: "survey-creator",
    data() {
        return {
            loading: false,
            surveyObj: undefined,
            user: undefined,
            answer: undefined,
            errorMsg:undefined
        };
    },
    mounted() {
    },
    created() {
        this.$store.dispatch("updateUser").then(() => {
            this.user = this.$store.state.user;
        });
        this.getSurvey();
    },
    methods: {
        getSurvey() {
            this.$request.get("/browse/survey/" + this.getQueryVariable("survey_id")).then(resp => {
                this.loading=false
                if (!resp.success) {
                    this.errorMsg=resp.msg
                    return
                }
                this.surveyObj = resp.data;
                this.surveyObj.surveyContent = JSON.parse(this.surveyObj.surveyContent);
                this.getAnswer()
            });
        },
        getAnswer() {
            this.$request.get('/browse/answer/' + this.surveyObj.surveyId).then(resp => {
                if (resp.data != null) {
                    this.formAnswer(JSON.parse(resp.data.answerContent))
                }
            })
        },
        formAnswer(answerObj) {
            this.answer = []
            this.surveyObj.surveyContent.forEach(el => {
                // console.log(el.title,answerObj[el.field]);
                this.answer.push({
                    title: el.title,
                    content: answerObj[el.field]
                })
            })
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        },
        onSubmit(content) {
            let data = {
                answerContent: JSON.stringify(content),
                answerUserId: this.user.userId,
                answerSurveyId: this.surveyObj.surveyId
            }
            this.loading = true
            this.$request.post('/answer/add', JSON.stringify(data)).then(resp => {
                this.$ElMessage({
                    message: resp.msg,
                    type: resp.success ? 'success' : 'error',
                })
                if (resp.success) {
                    document.location.reload()
                }
            }).then(() => this.loading = false)
        }
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.error_msg{
    margin:15px auto;
    color: red;
    text-align: center;
}
nav {
    height: 60px;
    position: fixed;
    width: 100%;
    padding: 0 10px;
    z-index: 10;
    box-sizing: border-box;
    top: 0;
    border-bottom: 1px solid #cdd0d6;
    display: flex;
    backdrop-filter: saturate(180%) blur(6px);
    background: rgba(255, 255, 255, 0.9);
}

nav strong {
    padding: 0 10px;
    box-sizing: border-box;
    color: var(--el-text-color-regular);
    cursor: pointer;
    margin: auto;
    line-height: 60px;
    font-weight: normal;
}

main {
    max-width: 1240px;
    margin: auto;
    height: 100%;
    width: fit-content
}

.survey_container {
    max-width: 1500px;
    width: fit-content;
    margin: auto;
}

#surveyCreator {
    height: 100vh;
    width: 100%;
}

.answer_item{
    padding: 10px 20px;
    border-bottom: 1px solid #DCDFE6;
}
.answer_item strong{
    padding-left: 5px;
    color: #303133;
    margin-bottom: 10px;
}
.answer_item p{
    color: #606266;
    margin-top: 10px;
    text-indent: 20px;
}
</style>